<template>
  <div class="card-wrap">
    <Title>
      <template #content>
        <p class="title">产品统计</p>
        <icon-double-right style="color: #999; margin-left: 5px; font-size: 16px" />
      </template>
    </Title>
    <HomeLineChart style="margin-top: 20px" :allowSwitch="false" :targetList="targetList" :xData="xData" :dataMap="dataMap" :checkedKeys="checkedKeys" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Title from './Title.vue'
  import HomeLineChart from './HomeLineChart.vue'

  const targetList = ref<Array<any>>([
    {
      name: '新开发产品数量',
      value: 50,
      type: 1,
      value1: 100,
      value2: 100,
      key: '1',
      color: '#5470c6',
      line: 10,
      width: '30%',
    },
    {
      name: '新增首次入库FBA产品',
      value: 50,
      type: 1,
      value1: 100,
      value2: 100,
      key: '2',
      color: '#91cc75',
      width: '30%',
    },
  ])
  const xData = ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
  const checkedKeys = ref<Array<string>>(['1', '2'])
  const dataMap = {
    '1': [5, 10, 8, 15, 12, 20, 28],
    '2': [15, 20, 35, 40, 55, 65, 75],
  }
</script>

<style lang="less" scoped></style>
